<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>


    </style>
</head>

<body>
    <div>
        <img src="img/1.png" alt="">
        <img src="img/5.png" alt="">
        :
        <img src="img/0.png" alt="">
        <img src="img/1.png" alt="">
        :
        <img src="img/1.png" alt="">
        <img src="img/9.png" alt="">
    </div>
</body>

</html>

<script>
    window.onload = function () {
        showTime();
    }

    // 思路：获取当前时间，根据系统的时间，来改变图片的src
    // 15:02:35；

    function showTime() {
        // 1、启动定时器
        setInterval(function () {
            // 1）、获取当前时间
            var sum = new Date();
            // 2）、分别取出当前时间里的，小时的十位和个位；分钟的十位和给；秒的十位和个位；
            var arr = [
                parseInt(sum.getHours() / 10),
                sum.getHours() % 10,
                parseInt(sum.getMinutes() / 10),
                sum.getMinutes() % 10,
                parseInt(sum.getSeconds() / 10),
                sum.getSeconds() % 10
            ];

            // 3）、改变img标签的src属性
            // 获取所有的img标签
            var imgs = document.getElementsByTagName("img");
            for (var i = 0; i < arr.length; i++) {
                imgs[i].src = "img/" + arr[i] + ".png";
            }

        }, 1000);
    }
</script>